<template>
	<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import echarts from 'echarts'
	require('echarts/theme/macarons') // echarts theme
	import resize from './mixins/resize'

	const animationDuration = 6000

	export default {
		mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			showtype: {
				type: String,
				default: '电压'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '300px'
			}
		},
		data() {
			return {
				chart: null,
				random: 20
			}
		},
		mounted() {
			let that = this;
			that.$nextTick(() => {
				that.initChart()
				// setInterval(function () {
				//   that.random = +(Math.random() * 60).toFixed(2);
				//   that.initChart();
				// }, 2000);
			})
		},
		beforeDestroy() {
			if (!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		methods: {
			setnums(datas) {
				//console.log("z", datas);
				let that = this;
				that.random = datas;
				that.$nextTick(() => {
					that.initChart();
				})
			},
			initChart() {
				let that = this;
				this.chart = echarts.init(this.$el, 'macarons')
				var value = that.random;
				var colorArr = ['#23a7ff', '#aaaa00', '#19e8ff'];
				var title = '电压'
				var colorJB = {
					x: 0,
					y: 1,
					x2: 0,
					y2: 0,
					type: 'linear',
					global: false,
					colorStops: [{
							offset: 0,
							color: colorArr[0],
						},
						{
							offset: 0.6,
							color: colorArr[1],
						},
						{
							offset: 1,
							color: colorArr[2],
						},
					],
				};
				this.chart.setOption({
					series: [{
							name: '业务指标',
							type: 'gauge',
							startAngle: 225,
							endAngle: -45,
							min: 0,
							max: 70,
							splitNumber: 5, //刻度数量
							radius: '80%',
							detail: {
								show: true,
								fontFamily: 'PingFang',
								fontWeight: '500',
								color: '#5a5e09',
								fontSize: 15,
								offsetCenter: [0, '60%'],
								formatter: function(value) {
									return value + 'V';
								},
							},
							axisTick: {
								splitNumber: 14,
								lineStyle: {
									color: "#ffffff"
								}
							},
							axisLine: {
								show: true,
								roundCap: true,
								lineStyle: {
									width: 10,
									shadowBlur: 0,
									color: [
										[0.15, new echarts.graphic.LinearGradient(
											0, 0, 0, 1,
											[{
													offset: 1,
													color: '#fe6b7d'
												},
												{
													offset: 0,
													color: '#fed739'
												}
											]
										)],
										[0.3, '#fed739'],
										[0.7, new echarts.graphic.LinearGradient(
											0, 0, 0, 1,
											[{
													offset: 1,
													color: '#fed739'
												},
												{
													offset: 0,
													color: '#04e334'
												}
											]
										)],
										[0.85, '#fed739'],
										[1, new echarts.graphic.LinearGradient(
											0, 0, 0, 1,
											[{
													offset: 1,
													color: '#fe6b7d'
												},
												{
													offset: 0,
													color: '#fed739'
												}
											]
										)]
									]
								}
							},
							data: [{
								value: that.random,
								name: title
							}]
						}
						//       {
						//           type: 'gauge',
						//           startAngle: 225,
						//           endAngle: -45,
						//           min:'0',
						//           max:'60',
						//           splitNumber: 5, //刻度数量
						//           radius: '70%',
						//           axisLine: {
						//               show: true,
						//               lineStyle: {
						//                   color: '#139913',
						//               },
						//           },
						//           detail: {
						//               show: true,
						//               fontFamily: 'PingFang',
						//               fontWeight: '500',
						//               color: '#5a5e09',
						//               fontSize: 15,
						//               offsetCenter: [0, '60%'],
						//               formatter: function (value) {
						//                   return value+'v';
						//               },
						//           },
						//           axisTick: {
						//               show: true,
						//               lineStyle: {
						//                   color: colorArr[0],
						//                   width: 1
						//               },
						//           },
						//           splitLine: {
						//               show: true,
						//               length:20,
						//               lineStyle: {
						//                   color: colorArr[0],
						//                   width: 1
						//               }
						//           },
						//           axisLabel: {
						//               color: '#4B525E',
						//               fontSize: 12,
						//               distance: 20,
						//           },
						//           pointer: {
						//               show: true,
						//               width: 4,
						//               length: '100%',
						//           },
						//           itemStyle: {
						//               color: colorArr[0],
						//           },
						//           markPoint: {
						//               animation: false,
						//               silent: false,
						//               data: [
						//                   {
						//                       x: '50%',
						//                       y: '50%',
						//                       symbol: 'circle',
						//                       symbolSize:20,
						//                       itemStyle: {
						//                           color: colorArr[0],
						//                       },
						//                   },
						//               ],
						//           },
						//           data: [
						//               {
						//                   value: value,
						//               },
						//           ],
						//       },
						//       {
						//           type: 'gauge',
						//           radius: '75%',
						//           startAngle: 225,
						//           endAngle: -45,
						//           min: 0,
						//           max:60,
						//           title: {
						//               show: false,
						//           },
						//           detail: {
						//               show: true,
						//               offsetCenter: [0, '100%'],
						//               textStyle: {
						//                   fontSize: 15,
						//                   color: '#4B525E',
						//               },
						//               formatter: function () {
						//                   return title;
						//               },
						//           },
						//           axisLine: {
						//               show: true,
						//               lineStyle: {
						//                   width: 10,
						//                   color: [
						//                       [value / 60, colorJB],
						//                       [1, '#e8c1dd'],
						//                   ],
						//               },
						//           },
						//           axisTick: {
						//               show: false,
						//           },
						//           splitLine: {
						//               show: false,
						//           },
						//           axisLabel: {
						//               show: false,
						//           },
						//           pointer: {
						//               show: false,
						//           },
						//       },
						// {
						// 	// 背景渐变色
						// 	type: "pie",
						// 	radius: "90%",
						// 	// 不响应及触发鼠标事件
						// 	silent: true,
						// 	// 关闭背景动画
						// 	animation: false,
						// 	z: 0,
						// 	itemStyle: {
						// 		color: {
						// 			type: "radial", // 径向渐变
						// 			x: 0.5,
						// 			y: 0.5,
						// 			r: 0.25,
						// 			colorStops: [{
						// 					offset: 0,
						// 					color: "rgba(84, 103, 198, 0.6)"
						// 				},
						// 				{
						// 					offset: 0.1,
						// 					color: "rgba(84, 103, 198, 0.35)"
						// 				},
						// 				{
						// 					offset: 1,
						// 					color: "rgba(84, 103, 198, 0)"
						// 				}
						// 			]
						// 		}
						// 	},
						// 	data: [value]
						// }
					]
				})
			}
		}
	}
</script>
